<template>
  <div class="demo">
    <div class="demo-title">限制数量</div>
    <div class="demo-content">
      <Space direction="vertical" style="width: 100%" size="large">
        <Upload
          v-model:file-list="fileList"
          list-type="picture"
          :max-count="1"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
          <Button><UploadOutlined />Upload (Max: 1)</Button>
        </Upload>
        <Upload
          v-model:file-list="fileList2"
          list-type="picture"
          :max-count="3"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
          <Button><UploadOutlined />Upload (Max: 3)</Button>
        </Upload>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Space from '@sscd/space';
  import Upload from '@sscd/upload';
  import type { UploadProps } from '@sscd/upload';
  const fileList = ref<UploadProps['fileList']>([]);
  const fileList2 = ref<UploadProps['fileList']>([]);
</script>
